<template>
  <div class="circuitmonitor" :style="{ width: screenWidth + 'px'}">
    <el-container>
      <el-header>
        <span style="margin-left: 25px">
          线路号/列车号：
        </span>
        <el-cascader
            :options="trainList"
            v-model="train"
            :show-all-levels="false"
            expandTrigger="hover"
            @change=sceneSelected
        >
        </el-cascader>
      </el-header>
      <el-main>
        <el-menu
            :default-active="activeSene"
            class="el-menu-demo"
            mode="horizontal"
            @select="getDiagramList"
            background-color="rgb(30,36,48)"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item v-for="item in scenes" :key="item.sceneCode" :index="item.sceneCode">
            <template slot="title">
              <span>{{item.sceneName}}</span>
            </template>
          </el-menu-item>
        </el-menu>
        <el-row v-for="item in images" :key="item.imageId" :index="item.imageId">
          <canvas :id="item.imageId" style="display:block; margin: 0px auto"></canvas>
        </el-row>

      </el-main>
    </el-container>
  </div>
</template>

<style>
body {
  background-color: rgb(19,24,35)!important;
}
#app .el-header{
  padding: 0 0px;
}

#app .el-header
{
  background-color: transparent;
  color: #fff;
}

#app .el-input__inner,.el-cascader-menu__list{
  /*background-color: #333a3e;*/
  background: #000000;
  color:#ffffff;
  border-right: 1px solid #303030;
}

#app .el-cascader-node:not(.is-disabled):focus, li.el-cascader-node:not(.is-disabled):hover{
  /*background-color: #7e8aa0;*/
}
#el-menu-demo {
  background-color: #2c3e50;
}
</style>

<script>
import axios from 'axios';
document.querySelector('body').setAttribute('style', 'background-color: rgba(25,31,46,0.7)');

import {
  initCanvas,
  updateElements,
  // drawElements,
  // clearDraw,
  // registerClick,
  // changeElemStatus,
  // getVarMapLine,
} from "@/utils/RealTimeMonitoring/circuitmonitor";
export default {
  name: 'circuitmonitor',
  props:[],
  data() {
    return {
      screenWidth: document.body.clientWidth,
      urlBase: process.env.VUE_APP_BASE_URL || "http://119.23.127.239:3333/phm-web-service-gz/",
      trainList: [],
      train: [],
      activeSene: "1",
      scenes: [],
      images:[],
    }
  },
  computed: {
    drawElem() {//将nodes和 edges组合成一个对象，来用于watcb
      // console.log("~~~ ",this);
      const {nodes, edges} = this;
      // console.log("~~~~~ ",this.nodes);
      return {
        nodes,
        edges
      }
    }
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function () {
          // 打印screenWidth变化的值
          that.timer = false
        }, 400)
      }
    },
    // images: function () {
    //   let that = this;
    //   console.log("111 that",that.images);
    //   for(let i = 0; i < that.images.length; i++){
    //     let canvas = initCanvas(that.images[i].imageId, 1500, 300);
    //     console.log("111111",that.images[i].nodes, that.images[i].edges);
    //     updateElements(that.images[i].nodes, that.images[i].edges, canvas);
    //   }
    // },
  },
  methods: {
    //获取车辆线路列表
    getSelectList: function () {
      // console.log("1111");
      let url = this.urlBase + 'line/ganged';
      let that = this;

      that.trainList = [];
      axios.get(url, {
        params: "lineCode",
      }).then(function (resp) {
        // console.log(resp);
        that.trainList = resp.data.result;
        that.train.push(that.trainList[0].value);
        that.train.push(that.trainList[0].children[0].value);
        that.sceneSelected(that.train);
        that.getDiagramList(that.activeSene);
        // console.log(that.train);
      })
    },
    //选中线路下的N个场景，默认选中的场景为that.scenes[0].sceneCode
    sceneSelected: function (option) {
      // console.log("aaa " + option);
      let url = this.urlBase + 'crux/condition_scene_lists';
      let that = this;
      that.line = option[0];
      that.train = option[1];
      axios.get(url, {
        params: {
          lineCode: that.line,			//可选 不传查所有线路
          trainCode: that.train		//可选 不传查所有车
        }
      }).then(function (resp) {
        // console.log("bbb " + resp.data);
        that.scenes = resp.data;
        that.scenes.forEach(function (item) {
          item.sceneCode = item.sceneCode + "";
          // console.log("ccc " + item.sceneCode);
        })
        that.activeSene = that.scenes[0].sceneCode;
      })
    },
    updateImages: function () {
      let that = this;
      // console.log("111 that",that.images);

      for(let i = 0; i < that.images.length; i++){
        let canvas = initCanvas(that.images[i].imageId, 3000, 300);
        // console.log("111111",that.images[i].nodes, that.images[i].edges);
        updateElements(that.images[i].imageName,that.images[i].nodes, that.images[i].edges, canvas);
      }},
    //获取选中场景下的N张图
    getDiagramList: function (option) {
      // console.log("aaa " + option);
      let url = this.urlBase + 'crux/condition_scene_detail';
      let that = this;
      axios.get(url, {
        params: {
          sceneCode: option //axios发给后端的参数
        }
      }).then(function (resp) {//后端返回的数据
        // console.log("666 " + resp.data.images[1].imageName);
        that.images = resp.data.images;
        for(let i = 0; i < that.images.length; i++){
          that.images[i].imageId = i;
          // console.log("666 ",that.images[i].imageName);
        }
        that.$nextTick(()=>{
          that.updateImages();
        })
      })

    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth - 10;
      })()
    };
    this.getSelectList();
  },

}
</script>